import React from 'react';
import { Link } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';
import {
  Layout,
  Menu,
  Icon,
  Button,
} from 'antd';

import styles from './index.module.less';

export default class Seller extends React.Component {
  render() {
    return (
      <div className={styles.adminLayoutBox}>
        <Layout.Header style={{ background: '#fff', borderBottom: '1px solid #e1e1e1', padding: '0 20px' }}>
          <div className={styles.headerBox}>
            <div className={styles.brandText}>蜂收部落</div>
            <div className={styles.moduleText}>卖家中心</div>
            <div className={styles.switchBtn}>
              <Button size='small'>切为买家</Button>
            </div>
            <div className={styles.feedbackText}>
              <i className={`iconfont icon-fankui ${styles.headerIcon}`}></i>
              <span className={styles.text}>反馈</span>
            </div>
            <div className={styles.helpCenter}>
              <i className={`iconfont icon-bangzhuzhongxin ${styles.headerIcon}`}></i>
              <span className={styles.text}>帮助中心</span>
            </div>
          </div>
        </Layout.Header>
        <Layout hasSider style={{ height: 'calc(100vh - 100px)' }}>
          <Layout.Sider
            width={152}
            style={{
              overflow: 'auto',
              height: '100%',
              backgroundColor: '#32323a',
            }}
          >
            <Menu theme='dark' mode='inline' style={{ backgroundColor: '#32323a', color: '#fff' }}>
              <Menu.Item key='home'>
                <Link to='/seller'>
                  <Icon type='home' />
                  <span>首页</span>
                </Link>
              </Menu.Item>
              <Menu.Item key='money'>
                <Link to='/seller/trade'>
                  <Icon type='safety' />
                  <span>交易</span>
                </Link>
              </Menu.Item>
              <Menu.Item key='user'>
                <Link to='/seller/user/user-information'>
                  <Icon type='user' />
                  <span>账户</span>
                </Link>
              </Menu.Item>
              <Menu.Item key='store'>
                <Icon type='bank' />
                <span>店铺</span>
              </Menu.Item>
              <Menu.Item key='goods'>
                <Link to='/seller/goods'>
                  <Icon type='appstore'/>
                  <span>商品</span>
                </Link>
              </Menu.Item>
              <Menu.Item key='price'>
                <Icon type='pay-circle' />
                <span>报价</span>
              </Menu.Item>
              <Menu.Item key='custom'>
                <Icon type='team' />
                <span>客户</span>
              </Menu.Item>
              <Menu.Item key='marketing'>
                <Icon type='bar-chart' />
                <span>营销</span>
              </Menu.Item>
            </Menu>
          </Layout.Sider>
          <Layout>
            <Layout.Content style={{ overflow: 'auto', height: '100%' }}>
              {renderRoutes(this.props.route.routes)}
            </Layout.Content>
          </Layout>
        </Layout>
      </div>
    );
  }
}
